<template>
  <div class='wy-main car-info'>
    <a-row class="wy-main-title" v-if='!type'>
      <a-col :span="24">
        <p class="title-p">
          <a-divider class="title-vertical" type="vertical" />
          <span class="title-span">新增驾驶员</span>
          <a-divider class="title-divider" />
        </p>
      </a-col>
    </a-row>
    <a-form :form="form" @submit="handleSubmit" class="wy-form" >
      <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="车牌号">
        <a-select v-decorator="[ 'licence', {rules: [{ required: true, message: '请选择车牌号!' }]} ]" style="width: 280px;" placeholder="请选择车牌号">
          <a-select-option :value="itme.vehicleId" v-for="(itme,index) in licenceList" key=" index">
            {{itme.licence}}
          </a-select-option>
        </a-select>
        <router-link to="/business/car/vehicleadd"  v-if='!type'>
          <a-button type="primary" style="margin-left: 26px;">新增车辆</a-button>
        </router-link>
      </a-form-item>
      <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="车辆类型">
        <a-select  v-decorator="[ 'type', {rules: [{ required: true, message: '请选择车辆类型!' }]} ]" placeholder="请选择车辆类型">
          <a-select-option value="0">
            身份证
          </a-select-option>
          <a-select-option value="1">
            护照
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="车长">
        <a-input v-decorator="[ 'length', {rules: [{ required: true, message: '请输入车辆长度!' }]}]" placeholder='请输入车辆长度' /><span class="wei_mi">(米)</span>
      </a-form-item>
      <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="载重">
        <a-input v-decorator="[ 'weight', {rules: [{ required: true, message: '请输入车辆载重!'}]}]" placeholder='请输入车辆载重' /><span class="wei_mi">(吨)</span>
      </a-form-item>
      <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="体积">
        <a-input v-decorator="[ 'volume']" placeholder='请输入车辆体积' /><span class="wei_lifangmi">(立方米)</span>
      </a-form-item>
      <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="车辆常驻地">
        <a-input v-decorator="[ 'residence', {rules: [{ required: true, message: '请输入车辆常驻地!' }]}]" placeholder='请输入车辆常驻地' />
      </a-form-item>
      <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="驾驶员认证图片" class="upzjimg" v-if="type == 'info'">
        <div class="up_img">
          <img  v-if="Driver_img" :src="Driver_img" alt="avatar" />
        </div>
        <div class="up_img">
          <img  v-if="Positive_img" :src="Positive_img" alt="avatar" />
        </div>
        <div class="up_img">
          <img  v-if="Back_img" :src="Back_img" alt="avatar" />
        </div>
        <div class="up_img">
          <img  v-if="Qualifications_img" :src="Qualifications_img" alt="avatar" />
        </div>
      </a-form-item>
      <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="驾驶员认证图片" class="upzjimg" v-if="type != 'info'">
        <a-form-item class="up_img">
          <a-upload v-decorator="[ 'upload1',{rules: [{ required: true, message: '请上传驾驶员照片 !' }]}]" name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Driver_Change">
            <div class="img_zz" v-if="Driver_img">
              <div class="img_zz_text" >
                <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                  <span style="color: red;"></span> 
                </div>
              </div>
              <div class="img_zz_d"></div>
            </div>
            <img  v-if="Driver_img" :src="Driver_img" alt="avatar" />
            <div class="up_img_d" v-if="!Driver_img">
              <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text" style="margin-top: 10px;">
                 <span style="color: red;">*必填：</span>车辆照片 
              </div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item class="up_img">
          <a-upload v-decorator="[ 'upload2',{rules: [{ required: true, message: '请上传车辆照片 !' }]}]" name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
            <div class="img_zz" v-if="Positive_img">
              <div class="img_zz_text" >
                <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                   <span style="color: red;"></span>
                </div>
              </div>
              <div class="img_zz_d"></div>
            </div>
            <img  v-if="Positive_img" :src="Positive_img" alt="avatar" />
            <div class="up_img_d" v-if="!Positive_img">
              <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text" style="margin-top: 10px;">
                 <span style="color: red;">*必填：</span>行驶证照片 
              </div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item class="up_img">
          <a-upload v-decorator="[ 'upload3',{rules: [{ required: true, message: '请上传道路运输证照片 !' }]}]"  name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Back_Change">
            <div class="img_zz" v-if="Back_img">
              <div class="img_zz_text" >
                <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                   <span style="color: red;"></span>  
                </div>
              </div>
              <div class="img_zz_d"></div>
            </div>
            <img  v-if="Back_img" :src="Back_img" alt="avatar" />
            <div class="up_img_d" v-if="!Back_img">
              <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text" style="margin-top: 10px;">
                 <span style="color: red;">*必填：</span>道路运输证(运营证) 
              </div>
            </div>
          </a-upload>
        </a-form-item>
<!--         <a-form-item class="up_img">
          <a-upload v-decorator="[ 'upload4']"  name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Qualifications_Change">
            <div class="img_zz" v-if="Qualifications_img">
              <div class="img_zz_text" >
                <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                   <span style="color: red;">*必填：</span>道路运输证(运营证) 
                </div>
              </div>
              <div class="img_zz_d"></div>
            </div>
            <img  v-if="Qualifications_img" :src="Qualifications_img" alt="avatar" />
            <div class="up_img_d" v-if="!Qualifications_img">
              <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text" style="margin-top: 10px;">
                 道路运输证(运营证) 
              </div>
            </div>
          </a-upload>
        </a-form-item> -->
      </a-form-item>
      <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12.5 }" label="车辆简介">
        <a-textarea style="margin-top: 10px;width: 447px;height:173px;" :rows="4"  v-decorator="[ 'vehicleRemarks', {rules: [{ required: true, message: '请输入车辆简介!' }]}]" placeholder='请输入车辆简介' />
      </a-form-item>
      <a-row style="margin-top: 10px;">
        <a-col :span="24">
          <p style="margin: 0;">
            <a-divider style="width: 95%;margin-left: 20px;" />
          </p>
        </a-col>
      </a-row>
        <div class="ant-row ant-form-item"  v-if='type!="info"'>
        <div class="ant-col-4 ant-form-item-label"></div>
        <div class="ant-col-20 ant-form-item-control-wrapper">
          <div class="ant-form-item-control">
            <div class="ant-title">
              <span class="title-span" style="margin-left:-50px; font-size:16px; font-weight:700; ">审核意见</span>
            </div>
             <div class="ant-radio">
            <a-radio-group v-model="value">
              <a-radio :value="120">
              通过
              </a-radio>
              <a-radio :value="121">
              拒绝
              </a-radio>
           </a-radio-group>
           </div>
           <div class="a-textarea">
             <a-textarea placeholder="审核意见" v-model="authenticationRemarks" style="margin-top: 10px; width: 447px;height:173px;" :rows="4" />
           </div>
          </div>
        </div>
      </div>
      <div class="ant-row ant-form-item" v-if='type!="info"'>
        <div class="ant-col-4 ant-form-item-label"></div>
        <div class="ant-col-10 ant-form-item-control-wrapper">
          <div class="ant-form-item-control">
            <span class="ant-form-item-children">
              
              <a-button type="primary"  html-type="submit" >
                {{type == 'edit' ? '提交':'提交'}}
              </a-button>
              
            </span>
          </div>
        </div>
      </div>
      
    </a-form>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  import { environment } from '@/environments/environment'
  import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
  export default {
    components: {
    },
    props:['datail','type'],
    data() {
      return {
        agreement:false,
        value:120,
        licenceList:'',
        authenticationRemarks:'',
        vehicleRemarks:'',
        uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
        FileUploadUrl2:environment.FileUploadUrl2,
        Driver_img:'',// 驾驶员正面照片
        Positive_img:'',// 身份证正面照片
        Back_img:'',// 身份证背面照片
        Qualifications_img:'',// 道路运输从业资格证照片
        vehiclePics :'',// 驾驶员照片
        vehiclePicsPath:'',// 驾驶员照片目录 
        certificatesPics :'',// 营业证
        certificatesPicsPath :'',// 营业证目录 
        drivingLicense :'',//  车辆行驶证 
        drivingLicensePath :'',// 车辆行驶证存放目录
        loading: false,
        imageUrl: '',
        upload1:null,
        upload2:null,
        upload3:null,
        formItemLayout: {
          labelCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 4
            },
          },
          wrapperCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 10
            },
          },
        },
      }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
    },
    created() {
      console.log(this.datail,'datail')
      console.log(this.type,'type')
    
      if(this.datail){

        let datail = this.datail

        if(datail.authenticationStatus==120){
          this.value = 121;
        }else{
          this.value = 120;
        }
        this.vehicleRemarks = datail.vehicleRemarks;

        this.authenticationRemarks = datail.authenticationRemarks;
        setTimeout(()=>{
          this.form.setFieldsValue({
            address:datail.address,
            length:datail.length,
            type:datail.type,
            residence:datail.residence,
            driverName:datail.driverName,
            weight:datail.weight,
            approvalStatus:datail.approvalStatus,
            licence:datail.licence,
            vehicleRemarks:datail.vehicleRemarks
            
          });
            },0)
        

        
        this.vehiclePics  = datail.vehiclePics// //车辆照片
        this.vehiclePicsPath = datail.vehiclePicsPath// 车辆照片目录

        this.certificatesPics  = datail.certificatesPics// 营业证
        this.certificatesPicsPath  = datail.certificatesPicsPath// 营业证存放目录 
        this.drivingLicense  = datail.drivingLicense//  驾驶证 
        this.drivingLicensePath  = datail.drivingLicensePath// 驾驶证存放目录
        
        if(this.vehiclePicsPath){
          this.Driver_img = this.FileUploadUrl2+this.vehiclePicsPath+this.vehiclePics//营业证显示照片
            setTimeout(() => {
              this.form.setFieldsValue({
              upload1:true
              });
            }, 100);
        }
        if(this.drivingLicensePath){
            this.Positive_img = this.FileUploadUrl2+this.drivingLicensePath+this.drivingLicense// 驾驶证显示照片
          setTimeout(() => {
            this.form.setFieldsValue({
            upload2:true
            });
          }, 100);
        }
        if(this.certificatesPicsPath){
          this.Back_img = this.FileUploadUrl2+this.certificatesPicsPath+this.certificatesPics// 车辆显示照片
            setTimeout(() => {
              this.form.setFieldsValue({
              upload3:true
              });
            }, 100);
        }
        

      }

      this.getvehicle()

    },
    watch: {},

    mounted: function() {

    },
    methods: {
      
      // 校验手机号
      // checkMobile:checkTel,
      // 校验邮箱
      checkMail:checkEmail,
      // 上传驾驶员正面照片
      Driver_Change(info){
        console.log(info,9889)
        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          this.Driver_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
          this.vehiclePics = info.file.response.data.certificatesjpg// 驾驶员照片
          this.vehiclePicsPath= info.file.response.data.certificatesPath// 驾驶员照片目录 
          this.loading = false
        }
      },
      // 身份证正面照
      Positive_Change(info){
        console.log(info,9889)
        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          this.Positive_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
          this.drivingLicense = info.file.response.data.certificatesjpg//  身份证正面 
          this.drivingLicensePath = info.file.response.data.certificatesPath// 身份证正面存放目录
          this.loading = false
        }
      },
      // 上传身份证背面
      Back_Change(info){
        console.log(info,9889)
        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          this.Back_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
          this.certificatesPics = info.file.response.data.certificatesjpg// 身份证反面
          this.certificatesPicsPath = info.file.response.data.certificatesPath// 身份证反面存放目录 
          this.loading = false
        }
      },
      // 上传运输资格证照片
      Qualifications_Change(info){
        console.log(info,9889)
        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          this.Qualifications_img = info.file.response.data.certifJpgFile

          this.loading = false
        }
      },
      // 上传证件
      beforeUpload(file) {
        console.log(file.type)
        const isJPG = file.type === 'image/jpeg' || 'image/png'
        if(!isJPG) {
          this.$message.error('You can only upload JPG file!')
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if(!isLt2M) {
          this.$message.error('Image must smaller than 2MB!')
        }
        return isJPG && isLt2M
      },
      // 上传前事件
      handleChange(info) {
        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          // Get this url from response in real world.
          getBase64(info.file.originFileObj, (imageUrl) => {
            this.imageUrl = imageUrl
            this.loading = false
          })
        }
      },
      // 认证提交
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, values) => {
            console.log('Received values of form: ', values);
          
          if(!err) {
            values.userId = this.user.userId

            values.vehiclePics = this.vehiclePics// 车辆照片
            values.vehiclePicsPath= this.vehiclePicsPath// 车辆照片目录 
            values.certificatesPics = this.certificatesPics// 营业证
            values.certificatesPicsPath = this.certificatesPicsPath// 身营业证存放目录 
            values.drivingLicense = this.drivingLicense//  车辆行驶证 
            values.drivingLicensePath = this.drivingLicensePath// 车辆行驶证存放目录

            values.authenticationStatus = this.value;
            values.authenticationRemarks = this.authenticationRemarks;
            console.log('Received values of form: ', values);
            if (this.type === 'edit') {
              this.editSubmit(values)
            }else{
              this.addSubmit(values)
            }
          }
        });
      },
      // 获取车辆信息
      getvehicle(){
        this.$get('/info/infoVehicle/getVehicleId').then((r) => {
          console.log('汽车: ',r)
          this.licenceList = r.data.data
        })
      },
      // 添加保存数据
      addSubmit(values){
        this.$post('info/infoDriver', values,true).then((r) => {
          console.log(r,8989)
          if(r.status == 200){
            this.$message.success(r.data.message)
            this.form.resetFields();
          }
          this.loading = false;
        }).catch((e) => {
          console.log(e)
          this.$message.error(e)
          this.loading = false;
        })
      },
      // 编辑修改数据
      editSubmit(values){
        values.driverId = this.datail.driverId;
        this.$put('info/infoVehicle', values,true).then((r) => {
          console.log(r,8989)
          console.log(this.datail.approvalStatus )
          if(r.status == 200){
            // this.$message.success(r.data.message)
            this.$emit('close');
          }
        }).catch((e) => {
          console.log(e)
          this.$message.error(e)
        })
      },
      callback(key) {
        console.log(key)
      }
    },
    computed: {
      ...mapState({
        multipage: state => state.setting.multipage,
        user: state => state.account.user,
      }),
    },
  }
</script>

<style lang="less" scoped>
  .car-info {
    .upzjimg{
      .up_img{
        float: left;
        position: relative;
        margin-right: 10px;
        margin-bottom: 10px;
        img{
          width: 200px;
          height: 200px;
        }
        .up_img_d{
          width: 200px;
          height: 200px;
          padding-top: 55px; 
        }
        .img_zz{
          width: 200px;
          height: 200px; 
          position: absolute; 
          color: #fff;
          border: 1px solid;
          .img_zz_text{
            width: 100%;
            text-align: center;
            position: absolute;
            z-index: 10;
            padding-top: 55px; 
          }
          .img_zz_d{
            position: absolute;
            width: 200px ;
            height:200px;
            background: #000;
            opacity:0.6;
          }
        }
      }
    }
  .wei_mi{
    position: absolute;
    right: -30px;
  }
  .wei_lifangmi{
    position: absolute;
    right: -60px;
  }
  }

</style>